<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>页头</el-header>
        <el-container>
            <el-aside>
                <el-tree :data="data" :props="defaultProps"
                         @node-click="handleNodeClick"></el-tree>

            </el-aside>
            <el-main style="overflow: hidden">
                <iframe :src="curPage" style="width: 100%;height: 100%;border: 0px"></iframe>
            </el-main>
        </el-container>
        <el-footer>页脚</el-footer>
    </el-container>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data: {
            data : [],
            defaultProps: {
                children: 'children',  // 子节点集合名
                label: 'name'         // 显示的字段名
            },
            curPage : "https://www.163.com"
        },
        created(){  // 事件钩子函数
            axios.get("file/tree").then(res=>{
                this.data = res.data
            })
        },
        methods : {  // 自定义函数
            handleNodeClick(data){
                this.curPage = data.name;
            }
        }
    })
</script>
</body>
</html>